<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>translate3d 两面反转的盒子</title>
  <style>
    body {
      perspective: 2000px;
    }

    .container {
      position: relative;
      height: 400px;
      width: 400px;
      margin: 400px auto;
      text-align: center;
      line-height: 200px;
      border: 1px solid red;
      transform-style: preserve-3d;
      animation: run 10s linear  infinite ;
    }
    .container:hover{
      transform: rotateY(-1turn);
      
      animation-play-state: paused;
    }
    @keyframes run {
      0%{
        transform:rotateY(0)
      }
      100%{
        transform:rotateY(360deg)
      }
    }
    .container div {
      position: absolute;
      top: 0;
      left: 0;
      width: 400px;
      height: 300px;
    }
    .container div img{
      width: 100%;
      /* transform: scaleX(0.8) scaleY(0.8); */
    }
   
    /* .container div:nth-child(1) {
      transform: translateZ(346.4px) 
    }
    
    .container div:nth-child(2) {
      transform: translate3d(300px,0px, 173.2px) rotateY(60deg);
    }

    .container div:nth-child(3) {
      transform: translate3d(300px,0px,-173.2px) rotateY(-60deg);
    }

    .container div:nth-child(4) {
      transform: translateZ(-346.4px);
    }

    .container div:nth-child(5) {
      transform: translate3d(-300px,0px,-173.2px) rotateY(60deg);
    }

    .container div:nth-child(6) {
      transform: translate3d(-300px,0px,173.2px) rotateY(-60deg);
    } */
     
     .container div:nth-child(1){
      transform:  rotateY(0deg) translateZ(346px);
     }
     .container div:nth-child(2){
      transform: rotateY(60deg) translateZ(346px);
     }
     .container div:nth-child(3){
      transform:  rotateY(120deg) translateZ(346px);
     }
     .container div:nth-child(4){
      transform: rotateY(180deg) translateZ(346px);
     }
     .container div:nth-child(5){
      transform:  rotateY(240deg) translateZ(346px);
     }
     .container div:nth-child(6){
      transform: rotateY(300deg) translateZ(346px);
     }
  </style>
</head>

<body>
  <div class="container">
    <div><img src="../img/avatar1.png"></div>
    <div><img src="../img/avatar2.png"></div>
    <div><img src="../img/avatar3.png"></div>
    <div><img src="../img/avatar4.png"></div>
    <div><img src="../img/avatar5.png"></div>
    <div><img src="../img/avatar6.png"></div>
  </div>
</body>
<div></div>

</html>
